<template>
  <div class="resource-application-container">
    <div class="application-card">
      <div class="header-section">
        <h1 class="title">资源申请</h1>
        <div class="decorative-line"></div>
      </div>

      <el-form
          :model="form"
          :rules="formRules"
          ref="formRef"
          label-width="120px"
          @submit.native.prevent="submitForm"
          class="custom-form"
      >
        <!-- 申请人表单项 -->
        <h2>申请人：{{ user.name }}</h2>

        <!-- 项目选择表单项 -->
        <el-form-item label="申请项目" prop="project">
          <el-select
              v-model="form.project"
              placeholder="请选择关联项目"
              class="full-width-select"
          >
            <el-option
                v-for="item in projectOptions"
                :key="item.id"
                :label="item.projectName"
                :value="item.projectName"
            />
          </el-select>
        </el-form-item>

        <!-- 资源类型选择表单项 -->
        <el-form-item label="资源类型" prop="resourceType">
          <el-select
              v-model="form.resourceType"
              placeholder="请选择资源类型"
              class="full-width-select"
          >
            <el-option
                v-for="type in resourceTypes"
                :key="type.id"
                :label="type.resourceType"
                :value="type.resourceType"
            />
          </el-select>
        </el-form-item>

        <!-- 动态金额输入 -->
        <transition name="el-zoom-in-top">
          <el-form-item
              v-if="form.resourceType === '资金'"
              label="申请金额"
              prop="amount"
          >
            <el-input-number
                v-model="form.amount"
                :min="100"
                :max="1000000"
                :controls="false"
                class="full-width-input with-currency"
                placeholder="请输入金额"
            >
              <span slot="prefix" class="currency-unit">¥</span>
            </el-input-number>
          </el-form-item>
        </transition>

        <!-- 申请描述表单项 -->
        <el-form-item label="申请描述" prop="description">
          <el-input
              type="textarea"
              v-model="form.description"
              placeholder="请详细描述申请理由..."
              :rows="4"
              class="custom-textarea"
              :resize="'none'"
              :maxlength="500"
          >
            <div slot="append" class="word-counter">
              {{ form.description.length }}/500
            </div>
          </el-input>
        </el-form-item>

        <!-- 表单操作按钮 -->
        <div class="form-actions">
          <el-button
              type="primary"
              native-type="submit"
              class="submit-btn"
              :loading="submitting"
          >
            <i class="el-icon-send"></i> 提交申请
          </el-button>
          <el-button
              @click="resetForm"
              class="reset-btn"
          >
            <i class="el-icon-refresh"></i> 重置表单
          </el-button>
        </div>
      </el-form>

    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user:JSON.parse(localStorage.getItem('honey-user')||'{}'),
      form: {
        applicant: '',
        project: '',
        resourceType: '',
        amount: 100,
        description: ''
      },
      formRules: {
        applicant: [
          { required: true, message: '请输入申请人姓名', trigger: 'blur' },
          { min: 2, max: 20, message: '姓名长度在2到20个字符', trigger: 'blur' }
        ],
        project: [
          { required: true, message: '请选择关联项目', trigger: 'change' }
        ],
        resourceType: [
          { required: true, message: '请选择资源类型', trigger: 'change' }
        ],
        amount: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (this.form.resourceType === 'funding' && value < 100) {
                callback(new Error('申请金额不能低于100元'));
              } else {
                callback();
              }
            },
            trigger: 'blur'
          }
        ],
        description: [
          { required: true, message: '请输入申请描述', trigger: 'blur' },
          { min: 20, message: '描述内容至少20个字符', trigger: 'blur' }
        ]
      },
      projectOptions: [
      ],
      resourceTypes: [],
      submitting: false
    };
  },
  created() {
   this.selectProject()

  },
  methods: {
    selectProject(){
      this.$request.get('/project/selectUserProject')
          .then(res=>{
            this.projectOptions=res.data
          }),
      this.$request.get('/project/selectResourcesType')
          .then(res=>{
            this.resourceTypes=res.data
          })
    },
    async submitForm() {

      try {
        this.submitting = true;
        await this.$refs.formRef.validate();
        const res = await this.$request.post('/project/resources', {
         ...this.form
        });
        this.$message.success('提交成功！');
        this.resetForm();
      } catch (error) {
        this.$message.warning('请正确填写表单');
      } finally {
        this.submitting = false;
      }
    },
    resetForm() {
      this.$refs.formRef.resetFields();
      this.form.amount = 100;
    }
  }
};
</script>

<style scoped>
/* 保持原有样式不变 */
.resource-application-container {
  background: #f0f2f5;
  min-height: 100vh;
  padding: 40px 20px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.application-card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  padding: 32px;
  width: 100%;
  max-width: 800px;
  transition: all 0.3s ease;
}

/* 其他样式保持不变... */

.word-counter {
  color: #909399;
  font-size: 12px;
  padding: 0 8px;
}
</style>